import { newBigeMap } from "./map.js"
import {leftMap} from './leftMenuMap.js'
class rightEditorMap{
	constructor() {
	    this.BM
	    this.map
	    this.VM
		// 当前编辑的对象、id、type
		this.editObj = ''
		this.editObjPId = ''
		// this.editObjId = ''
		// this.editObjType = ''
		this.isModifyPath = false // 是否修改路径
	}
	init(vue){
		return new Promise((reslove, reject) => {
			this.VM = vue
			// 获取组件地图对象数据
			setTimeout(()=>{
				newBigeMap.getMapObjData().then(res=>{
					// 初始化绘画功能
					if(res){
						this.BM = res.BM
						this.map = res.map
						this.addMapClickFunc()
						reslove(true)
					}
					
					// 开启地图图层点击功能
					// this.bindMapClick()
					// this.map.on('click', ()=>{
					// 	this.detectionRightClickDom()
					// })
				})
			},1000)
			
		})
	}
	// 添加地图点击和右击事件
	addMapClickFunc(){
		this.map.on('click contextmenu', (e)=>{
			if(this.editObj && this.isModifyPath){
				this.editObj.editing.disable()
			}
			this.detectionRightClickDom()
			// console.log(e)
		})
	}
	// 地图图层点击功能
	bindMapClick(layer, map){
		layer.on('click', (e) => {
			// 检测当前是否存在已有编辑对象
			this.detectionClick().then(res=>{
				// 删除右键菜单dom元素
				this.detectionRightClickDom().then(d => {
					// 进入编辑状态
					let obj = e.target
					
					// obj.editing.enable()
					
					// 绑定当前编辑对象
					this.editObj = obj
					
					// 获取到当前点击对象的属性
					const edit = newBigeMap.customData.get(obj.id)
					// 记录当前点击对象的Pid
					this.editObjPId = edit.pId
					
					// 向页面传递对象数据
					this.VM.getEditorData(edit)
				})
			})
		}).on('contextmenu', (e) => {
			// 绑定右击事件
			let obj = e.target
			// 获取到鼠标点击的X、Y轴
			let latlng = e.containerPoint
			// console.log()
			// 如果右击的是当前对象，直接添加右键菜单，如果不是，先退出编辑状态
			if (obj.id === this.editObj.id) {
				this.rightClickAddDom(latlng)
				// 绑定当前编辑对象
				this.editObj = obj
			} else {
				this.detectionClick().then(res => {
					if (res) {
						// 绑定当前编辑对象	
						this.editObj = obj
						// 获取到当前点击对象的属性
						const edit = newBigeMap.customData.get(obj.id)
						// 记录当前点击对象的Pid
						this.editObjPId = edit.pId
						// this.editObjId = obj.id
						this.rightClickAddDom(latlng)
						// this.vm.editorBox = false
					}
				})
			}
		})
		// // 地图右击事件和监听图层编辑
		map.on('contextmenu click', (e) => {
			// this.setEdiorObjIsNull()
			// this.detectionClick()
			// 删除dom元素
			this.detectionRightClickDom()
			// 
			// this.vm.editorBox = false
		}).on(BM.Draw.Event.EDITVERTEX, (e) => {
			// 编辑
			// e.poly.closeTooltip()
			let editMap = newBigeMap.customData.get(e.poly.id)
			if (e.poly.type === 'polygon'){
				// 多边形
				let latLngs = e.poly.getLatLngs()[0]
				let area = newBigeMap.calculateArea(latLngs, e.poly)
				// e.poly.bindTooltip('面积:' + newBigeMap.calculateArea(latLngs) + 'k㎡')
				editMap.area = area
				editMap.unit = '㎡'
				// 向页面传递对象数据
			} else if(e.poly.type === 'polyline'){
				// 线段
				let latLngs = e.poly.getLatLngs()
				let length = newBigeMap.calculationDistance(latLngs, e.poly)
				// layer.bindTooltip('长:' + newBigeMap.calculationDistance(latLngs) + 'km')
				editMap.length = length
				editMap.unit = 'm'
			}
			// 设置页面属性值
			// this.VM.getEditorData(editMap)
			// 更改获取到的坐标
			this.changeObjLatLng(e.poly)
			
		}).on(BM.Draw.Event.EDITMOVE, (e) => {
			// 移动
			// e.layer.closeTooltip()
			this.changeObjLatLng(e.layer)
			if (e.layer.type === 'rectangle'){
				// 矩形
				let latLngs = e.layer.getLatLngs()[0]
				let rectanglea = newBigeMap.calculateArea(latLngs, e.layer)
			}
			// 检测当前是否存在右键菜单
			this.detectionRightClickDom()
		}).on(BM.Draw.Event.EDITRESIZE, (e) => {
			// 缩放
			// e.layer.closeTooltip()
			if (e.layer.type === 'rectangle'){
				// 矩形
				let latLngs = e.layer.getLatLngs()[0]
				let rectanglea = newBigeMap.calculateArea(latLngs, e.layer)
				// e.layer.bindTooltip('面积:' + newBigeMap.calculateArea(latLngs) + 'k㎡')
				let editMap = newBigeMap.customData.get(e.layer.id) 
				editMap.area = rectanglea
				editMap.unit = '㎡'
				// 向页面传递对象数据
				this.VM.getEditorData(editMap)
			} else if(e.layer.type === 'circle'){
				// 圆
				let editMap = newBigeMap.customData.get(e.layer.id)
				let latLngs = e.layer.getLatLng()
				let circleareas = newBigeMap.circleArea(latLngs, e.layer)
				editMap.area = circleareas.data
				editMap.unit = '㎡'
				editMap.radius = circleareas.R
				editMap.radiusUnit = 'm'
			}
			// 更改获取到的坐标
			this.changeObjLatLng(e.layer)
		});
	}
	// 更改获取到的坐标
	changeObjLatLng(layer){
		let type = layer.type,
			key = layer.id,
			latLng = ''
			
		let currentData = newBigeMap.customData.get(key)
		if(type == 'marker'){
			latLng = layer.getLatLng()
		} else if(type === 'polygon' || type === 'rectangle'){
			latLng = layer.getLatLngs()[0]
		} else if(type === 'polyline'){
			latLng = layer.getLatLngs()
		} else if(type === 'circle'){
			latLng = layer.getLatLng()
		}
		currentData.latLng = latLng
		
	}
	// 获取到编辑地图后的数据
	getMapCoverageData(){
		return new Promise((reslove, reject) => {
			// 地图是否经过编辑---true为经过过编辑，false为没有
			// isMapEditor
			if(newBigeMap.isMapEditor){
				let data = [...newBigeMap.customData.values()]
				reslove(data)
			} else {
				reject('地图没有经过编辑，可直接返回上一页')
			}
			
		})
	}
	// 返回上一页
	goBackPage(){
		return new Promise((reslove, reject) => {
			// 地图是否经过编辑---true为经过过编辑，false为没有
			// isMapEditor
			console.log(newBigeMap.isMapEditor)
			if(!newBigeMap.isMapEditor){
				reslove(true)
			} else {
				reject('此地图编辑后未提交数据，确定要返回上一页?')
			}
			
		})
	}
	// 完成编辑,,得到页面修改的数据参数
	finishEditor(data){
		// let edit = newBigeMap.customData.get(data.id)
		if(data.type == 'marker'){
			// 如果是标注
			let myIcon = BM.icon({
			    iconUrl: data.markerIcon,
			    iconSize: [32,32],
			});
			this.editObj.setIcon(myIcon)
			if(data.title){
				this.editObj.closeTooltip().bindTooltip(data.title, {direction:'bottom',permanent:true,className:'my_tooltip'})
			} else {
				this.editObj.closeTooltip()
			}
			if(data.content){
				this.editObj.bindPopup(data.content);
			}
		} else if (data.type === 'polyline') {
			// 线段
			this.editObj.setStyle(data.options)
			this.editObj.isShowArea = data.isShowArea
			// 判断是否显示长度
			if (data.isShowArea) {
				let latLngs = ''
				// if(data.type === 'circle'){
					latLngs = this.editObj.getLatLngs()
					newBigeMap.calculationDistance(latLngs, this.editObj)
				// } else {
				// 	latLngs = this.editObj.getLatLngs()[0]
				// 	newBigeMap.calculateArea(latLngs, this.editObj)
				// }
			} else{
				this.editObj.unbindTooltip()
			}
		} else if (data.type === 'polygon' || data.type === 'rectangle' || data.type === 'circle') {
			// 多边形或者矩形
			this.editObj.setStyle(data.options)
			this.editObj.isShowArea = data.isShowArea
			// 判断是否显示面积
			if (data.isShowArea) {
				let latLngs = ''
				if(data.type === 'circle'){
					latLngs = this.editObj.getLatLng()
					newBigeMap.circleArea(latLngs, this.editObj)
				} else {
					latLngs = this.editObj.getLatLngs()[0]
					newBigeMap.calculateArea(latLngs, this.editObj)
				}
			} else{
				this.editObj.unbindTooltip()
			}
			// console.log(data.isShowArea)
		}
		// console.log(this.editObjPId)
		if(this.editObjPId != data.pId){
			// 重新渲染左部图层数据
			this.updateLeftMenuData(this.editObjPId, data.pId, data.id)
		}
		// 如果该对象设置了自动定位，其他所有对象全部不定位
		if (data.isLocation) {
			newBigeMap.customData.forEach(v => {
				if (v.id === this.editObj.id && data.isLocation) {
					v.isLocation = data.isLocation
				} else {
					v.isLocation = false
				}
			})
		}
		// 设置地图状态为经过编辑的状态
		newBigeMap.isMapEditor = true
		// 退出编辑状态
		if (this.editObj) {
			// 取消对当前对象的编辑
			this.editObj.editing.disable()
			// 设置当前编辑的对象为空
			this.setEdiorObjIsNull()
		}
	}
	// 修改对象后,左部工具栏重新渲染数据
	updateLeftMenuData(oldPId, newPId, objId){
		// let data = [...newBigeMap.customData.values()]
		leftMap.VM.updateLeftMenuData({oldPId, newPId, objId})
	}
	// 检测当前是否存在已有编辑对象
	detectionClick() {
		return new Promise((reslove, reject) => {
			// 编辑相关数据所有不为空时满足条件
			if (this.editObj) {
				// 取消对当前对象的编辑
				this.editObj.editing.disable()
				this.VM.editorBox = false
				// 设置当前编辑的对象为空
				this.setEdiorObjIsNull()
			}
			reslove(true)
		})
	}
	// 检测当前是否存在右键菜单
	detectionRightClickDom() {
		return new Promise((reslove, reject) => {
			let clickMenu = document.getElementById('rightClickBox')
			if (clickMenu) {
				try {
					clickMenu.style.display = 'none'
					// clickMenu.parentNode.removeChild(clickMenu)
					reslove(true)
				} catch (e) {
					//TODO handle the exception
					throw new TypeError('删除dom元素出错', e)
				}
			} else {
				reslove(true)
			}
		})
	}
	// 设置当前编辑的对象为空
	setEdiorObjIsNull() {
		this.editObj = ''
		this.editObjPId = ''
		// this.editObjId = ''
		// this.editObjType = ''
	}
	// 右键点击对象，添加删除选项
	rightClickAddDom(latlng) {
		this.detectionRightClickDom().then(res => {
			if (res) {
				let clickMenu = document.getElementById('rightClickBox')
				clickMenu.style.left = `${latlng.x - 13}px`
				clickMenu.style.top = `${latlng.y + 6}px`
				
				clickMenu.style.display = 'block'
				
				
				
				// return
				
				// const mapPage = document.getElementById("mapPage")
				// // 最外层菜单
				// const menuBox = document.createElement('div')
				// menuBox.className = 'rightClickBox'
				// menuBox.id = 'rightClickBox'
				// menuBox.setAttribute('style',
				// 	`position: fixed;padding: 5px 20px;background: #FFFFFF;border-radius: 5px;border-radius: 5px;left: ${latlng.x}px;top: ${latlng.y + 10}px;`
				// )
				// // 菜单箭头
				// const span = document.createElement('span')
				// span.className = 'rightClickBoxSpan'
				// menuBox.appendChild(span)
				// // 菜单按钮层
				// // 删除按钮
				// const item = document.createElement('div')
				// item.className = 'menuItem'
				// item.innerText = '删除'
				// item.setAttribute('style', 'cursor: pointer;line-height: 32px;width: 60px;text-align: center;')
				// item.onclick = (e) => {
				// 	// 重新渲染左部图层数据
				// 	this.updateLeftMenuData(this.editObjPId, '', this.editObj.id)
				// 	// 删除自定义数据
				// 	newBigeMap.customData.delete(this.editObj.id)
				// 	// 删除地图元素
				// 	this.editObj.remove()
					
				// 	this.setEdiorObjIsNull()
					
				// 	// 删除dom元素
				// 	this.detectionRightClickDom()
				// 	this.VM.editorBox = false
				// 	// 设置地图状态为经过编辑的状态
				// 	newBigeMap.isMapEditor = true
				// }
				// // // 编辑按钮
				// // const item1 = document.createElement('div')
				// // item1.className = 'menuItem'
				// // item1.innerText = '编辑'
				// // item1.setAttribute('style', 'cursor: pointer;line-height: 32px;width: 40px;text-align: center;')
				// // item1.onclick = (e) => {
				// // 	// 重新渲染左部图层数据
				// // 	// this.updateLeftMenuData(this.editObjPId, '', this.editObj.id)
				// // 	// 删除自定义数据
				// // 	// newBigeMap.customData.delete(this.editObj.id)
				// // 	// 删除地图元素
				// // 	// this.editObj.remove()
					
				// // 	// this.setEdiorObjIsNull()
					
				// // 	// 删除dom元素
				// // 	this.detectionRightClickDom()
				// // 	this.VM.editorBox = false
				// // 	// 设置地图状态为经过编辑的状态
				// // 	newBigeMap.isMapEditor = true
				// // }
				// menuBox.appendChild(item)
				// // menuBox.appendChild(item1)
				// mapPage.appendChild(menuBox)
			}
		})
	}
}
export const editorMap = new rightEditorMap()